
function getUrlParam() {
    var url = location.search; //获取url中"?"符后的字串 
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}
//获取数据类型
function getDataType(callback, callback1, callback2) {
    // body...
    $.ajax({
        url: `/api/cms/column_types`,
        dataType: 'json',
        async: false,
        success: function(data) {
            if (data.status == 200) {
                callback(data.data[1].id, rectpl_id, area);
                callback1(data.data);
                callback2(rectpl_id, area);
            } else {
                layer.msg(data.data, { time: 2000, icon: 2 });
            }
        },
        error: function(XMLHttp, textStatus, errorThrown) {
            layer.msg(`请求 ${XMLHttp} 状态 ${textStatus} 异常 ${errorThrown}`, { time: 2000, icon: 2 });
        }
    });
}
// 媒资数据
/*
    column_type: 数据类型ID
    rectpl_id: 推荐位ID 2
    area: 区位信息 x0y0
 */
function getMediaAsset(column_types, rectpl_id, area) {
    // body...
    var check_box = '<input class="tableSpecialdelAllVod" name="check-all" type="checkbox" onclick="selectAllMediaAsset(this)">' +
        '全选/反选';
    media_assets = $('#media_assets').DataTable({
        // 服务器端渲染
        "serverSide": false,
        // 请求数据的形式(get, post), 请求的路径
        ajax: {
            // 数据的url
            url: `/api/cms/column_types/${column_types}/rectpl/${rectpl_id}/${area}`,
            type: "GET",
            data: function(d) {
                // 归类
                // d.vcat = $('#table-live-search1').val();

                // // 分类
                // d.vcattag = $('#table-live-search2').val();

                // // 搜索框
                // d.search_value = $('#table-live-search-inp').val();

            },
        },
        columns: [{
                orderable: false,
                data: "id",
                title: check_box,
                render: function(id) {
                    return `<input id="vod_checkbox_${ id }" type="checkbox" name="checkbox-live" onclick="selectItem(this, ' + id + ')">`
                },
                width: "16%"
            },
            {
                title: "序号",
                data: "id",
                orderable: true,
                width: "*"
            },
            {
                title: "id",
                data: "id",
                orderable: true,
                width: "*",
                visible: false
            },
            {
                title: "标题",
                data: "title",
                orderable: false,
                width: "*"
            },
            {
                title: "副标题",
                data: "subtitle",
                orderable: false,
                width: "*"
            }
        ],
        "destroy": true,
        // 请求数据的形式(get, post), 请求的路径
        "bProcessing": true, //DataTables载入数据时，是否显示‘进度’提示
        // 分页类型
        "pagingType": "full_numbers",
        "sLoadingRecords": "正在加载数据...",
        "sZeroRecords": "暂无数据",
        // 能否进行搜索
        "searching": true,
        "order": [
            [1, "asc"]
        ],
        "dom": 'rt<"bottom"ilp<"clear">>',
        "language": {
            "processing": "玩命加载中...",
            "lengthMenu": "显示 _MENU_ 项结果",
            "zeroRecords": "没有匹配结果",
            "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "infoFiltered": "(由 _MAX_ 项结果过滤)",
            "infoPostFix": "",
            "url": "",
            "paginate": {
                "first": "首页",
                "previous": "上一页",
                "next": "下一页",
                "last": "末页"
            }
        },
        fnDrawCallback: function() {　　
            var api = this.api();　　
            api.column(1).nodes().each(function(cell, i) {　　　　 
                cell.innerHTML = i + 1;　
            });
        },
        _fnPageChange: function() {}
    });
}

function renderDataType(data_type) {
    // body...
    // <option value="{{ $vcat->id }}">{{ $vcat->name }}</option>
    var item = '';
    recommend_data_type = data_type[1].id
    for (var i = 0; i < data_type.length; i++) {
        item += `<option value="${ data_type[i].id}"> ${ data_type[i].title }</option>`
    }
    $('#data_type').empty();
    $('#data_type').append(item);
}

//选择表单数据
function selectItem(e, id) {
    // body...
    //获取选中数据
    var row = media_assets.row($(e).parents('tr'));
    var _data = row.data();
    var all = $(e).is(":checked");
    $("input[name='checkbox-live']").each(function(index, item) {
        // 遍历当前页面每一行,判断是否每一行都选中
        if (!$(item).is(":checked")) {
            all = false;
        }
    });
    //获取栏目区域推荐数据,切换区域时将该变量设置为空数组
    if (column_area_recommend.length == 0) {
        //column_area_recommend = $('#column_recommend').dataTable().fnGetData(); //得到栏目区域所有对象
        // console.log($('#column_recommend').dataTable().fnGetData());
        column_area_recommend = $('#column_recommend').dataTable().fnGetData();//得到栏目区域所有对象并且转化为提交的数据格式
    }
    //选中的数据拼接成需要提交的数据
    var _item = {
        'data_type': recommend_data_type, // 数据类型
        'data_id': _data.id, // 数据id
        'img': _data.img, // 图片
        'range': 0, // 动作
        'tpl_id': 0, // 模板ID
        'title': _data.title || '', // 页面标题
        'message': _data.message || '', // 提示信息
        'area': '', // 刷新区域

        'name': _data.name || '',
        'subtitle': _data.subtitle || '',
        'tags': ''
        //'insert_mode': 'list0' //如果是栏目列表则传list0，
    };
    if(column_area_recommend.length == 0){
        column_area_recommend.push(_item);
    }else{
        //判断数据中是否有该条数据
        let key = column_area_recommend.findIndex(item => item.data_id == _data.id && item.data_type == recommend_data_type);
        if (key != -1) {
            column_area_recommend.splice(key, 1)
        } else {
            column_area_recommend.push(_item);
        }
    }

    if (all) {
        // 若每一行都选中,全选框选中
        $("input[name=check-all]").prop("checked", true);
    } else {
        // 若有某行未选中,全选框不选中
        $("input[name=check-all]").prop("checked", false);
    }
}

function addRow() {
    $("input[name='checkbox-live']").each(function(index, item) {
        // 遍历当前页面每一行,判断是否每一行都选中
        if ($(item).is(":checked")) {
            console.log($(item).parents('tr'))
            media_assets.rows($(item).parents('tr')).remove().draw();
        }
    });
    column_recommend.clear();
    column_recommend.rows.add(column_area_recommend);
    column_recommend.draw();
}

// 全选
function selectAllMediaAsset() {
    var is_check = $("input[name=check-all]").is(":checked")
    $("input[name='checkbox-live']").each(function(index, item) {
        $(item).prop('checked', is_check);
        // 全选获取所有选中的数据
        var row = media_assets.row($(item).parents('tr'));
        var _data = row.data();
        //获取栏目区域推荐数据,切换区域时将该变量设置为空数组
        if (column_area_recommend.length == 0) {
            column_area_recommend = $('#column_recommend').dataTable().fnGetData(); //得到栏目区域所有对象
        }
        //选中的数据拼接成需要提交的数据
        var _item = {
            'data_type': recommend_data_type, // 数据类型
            'data_id': _data.id, // 数据id
            'img': _data.img || '', // 图片
            'range': 0, // 动作
            'tpl_id': 0, // 模板ID
            'title': _data.title || '', // 页面标题
            'message': _data.message || '', // 提示信息
            'area': '', // 刷新区域

            'name': _data.name || '',
            'subtitle': _data.subtitle || '',
            'tags': ''
            //'insert_mode': 'list0' //如果是栏目列表则传list0，
        };
        let key = column_area_recommend.findIndex(item => item.data_id == _data.id && item.data_type == recommend_data_type);
        if(is_check){
            if(key == -1){
                column_area_recommend.push(_item);
            }
        }else{
            if (key != -1) {
                column_area_recommend.splice(key, 1)
            }
        }
    });
    // console.log(column_area_recommend);
    // console.log(column_area_recommend.length);
}

//转换栏目推荐位数据格式为：
/*
'data_type': recommend_data_type, // 数据类型
'data_id': _data.id, // 数据id
'img': _data.img, // 图片
'range': 0, // 动作
'tpl_id': 0, // 模板ID
'title': '', // 页面标题
'message': '', // 提示信息  
'area': '' // 刷新区域 
 */
function tranformColumnAreaRecommend(column_recommend) {
    // body...
    // console.log(column_recommend);
    var _column_recommend = [];
    $.each(column_recommend, function(k, v){
        // console.log(k);
        // console.log(v);
        var _item = {
            'data_type': v.data_type, // 数据类型
            'data_id': v.data_id, // 数据id
            'img': v.img || '', // 图片
            'range': v.range || '', // 动作
            'tpl_id': v.tpl_id, // 模板ID
            'title': v.title, // 页面标题
            'message': v.message || '', // 提示信息  
            'area': v.area || null// 刷新区域
            //'insert_mode': 'list0' //如果是栏目列表则传list0，
        };
        _column_recommend.push(_item);
    });
    return _column_recommend
}
//获取指定区域推荐位数据
function getColumnAreaRecommend(column_types, area) {
    destruction();
    // body...
    var check_box = '<input class="tableSpecialdelAllVod" name="check-all" type="checkbox" onclick="selectAllVod(this)">' +
        '全选/反选';
    column_recommend = $('#column_recommend').DataTable({
        // 服务器端渲染
        "serverSide": false,
        // 请求数据的形式(get, post), 请求的路径
        ajax: {
            // 数据的url
            url: `/api/cms/apppage_rectpls/${column_types}/area/${area}`,
            type: "GET",
            data: function(d) {
                // // 归类
                // d.vcat = $('#table-live-search1').val();

                // // 分类
                // d.vcattag = $('#table-live-search2').val();

                // // 搜索框
                // d.search_value = $('#table-live-search-inp').val();

            },
        },
        columns: [
            // {
            //     orderable: false,
            //     data: "rowid",
            //     title: check_box,
            //     render:function(rowid){
            //         return `<input id="vod_checkbox_${ rowid }" type="checkbox" name="checkbox-live" onclick="selectItem(this, ' + id + ')">`
            //     },
            //     width:"*"
            // },
            {
                // 列名
                title: "序号",
                // 数据
                data: null,
                // 能否进行排序
                orderable: true,
                width: "6%"
            },
            {
                title: "id",
                data: "data_id",
                orderable: false,
                width: "*",
                visible: false
            },
            {
                title: "原标题",
                data: "title",
                orderable: false,
                width: "*"
            },
            {
                title: "推荐标题",
                data: "name",
                orderable: false,
                width: "*"
            },
            {
                title: "推荐副标题",
                data: "subtitle",
                orderable: false,
                width: "*"
            },
            {
                title: "推荐图",
                data: "img",
                orderable: false,
                width: "*",
                render: function(img) {
                    return `<img src="${img}"/>`;
                }
            },
            {
                title: "推荐标签",
                data: "tags",
                orderable: false,
                width: "*",
                render: function(tags) {
                    var _item = '';
                    for (var i = 0; i < tags.length; i++) {
                        _item += `<span src="${tags[i]}"></span>`
                    }
                    return _item;
                }
            },
            {
                title: "操作",
                orderable: false,
                width: "5%",
                render: function(data, index, row, meta) {
                    return '<button type="button" class="btn btn-danger btn-xs" data-id='+ row.data_id +' onclick="removeData(this)"><i class="glyphicon glyphicon-trash"></i></button>';
                }
            }
        ],
        "destroy": true,
        // 请求数据的形式(get, post), 请求的路径
        "bProcessing": true, //DataTables载入数据时，是否显示‘进度’提示
        // 分页类型
        "pagingType": "full_numbers",
        "sLoadingRecords": "正在加载数据...",
        "sZeroRecords": "暂无数据",
        // 能否进行搜索
        "searching": true,
        "order": [
            [0, "asc"]
        ],
        "dom": 'rt<"bottom"ilp<"clear">>',
        "language": {
            "processing": "玩命加载中...",
            "lengthMenu": "显示 _MENU_ 项结果",
            "zeroRecords": "没有匹配结果",
            "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "infoFiltered": "(由 _MAX_ 项结果过滤)",
            "infoPostFix": "",
            "url": "",
            "paginate": {
                "first": "首页",
                "previous": "上一页",
                "next": "下一页",
                "last": "末页"
            }
        },
        fnDrawCallback: function() {　　
            var api = this.api();　　
            api.column(0).nodes().each(function(cell, i) {　　　　 
                cell.innerHTML = i + 1;
            });
        },
        _fnPageChange: function() {}
    });
    // 单行选中
    $('#column_recommend').on('click', 'tr', function() {
        if($(this).hasClass('selected')) {
            $(this).removeClass('selected');
        } else {
            column_recommend.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
            var row = column_recommend.row(this);
            var _data = row.data();

            modificationRecommendData(_data);
            setAdata(_data.range);
        }
    });
}
// 标签生成
function modificationRecommendData(data) {
    // console.log(data)
    $("#area").html(recommend_data_type);
    $("#area_data").html(area);
    $("#recommend_titles").val(data.title);
    $("input[name=template]").val(data.subtitle);
    // 标签从接口获取 到时后台给出接口再填进去
    var item = '';
    // for (var i = 0; i < data.tags.length; i++) {
    //     item += "<input type='checkbox' name='tags'>" + data.tags[i] +"";
    // }
    item += "<span><input type='checkbox' name='tags'> 标签1</span>"
    item += "<span><input type='checkbox' name='tags'> 标签2</span>"
    item += "<span><input type='checkbox' name='tags'> 标签3</span>"
    item += "<span><input type='checkbox' name='tags'> 标签4</span>"
    item += "<span><input type='checkbox' name='tags'> 标签5</span>"
    item += "<span><input type='checkbox' name='tags'> 标签6</span>"
    item += "<span><input type='checkbox' name='tags'> 标签7</span>"
    $("#tags").html(item);
}

//保存推荐位数据
/*
    area       区位
    rectpl_id  推荐位ID
    data       数据(见前端提交数据接口数据结构初稿)
 */
function addRecommendData(th) {
    if (column_area_recommend.length == 0) {
        column_area_recommend = tranformColumnAreaRecommend($('#column_recommend').dataTable().fnGetData());//得到栏目区域所有对象并且转化为提交的数据格式
    }
    // body...
    $.ajax({
        url: `/api/cms/rectpl/${rectpl_id}/templates/${area}`,
        type: "POST",
        dataType: 'json',
        async: false,
        data: {
            data: column_area_recommend
        },
        success: function(data) {
            if (data.status == 200) {
                layer.msg(data.data, { time: 2000, icon: 6 });
                media_assets.ajax.reload();
                column_recommend.ajax.reload();
                // location.reload();
                // console.log(column_area_recommend);
                backfill();
            } else {
                layer.msg(data.data, { time: 2000, icon: 2 });
            }
        },
        error: function(XMLHttp, textStatus, errorThrown) {
            layer.msg(`请求 ${XMLHttp} 状态 ${textStatus} 异常 ${errorThrown}`, { time: 2000, icon: 2 });
        }
    });
}

// 回填数据
function backfill() {
    $.ajax({
        url: `/api/cms/apppage_rectpls/${rectpl_id}/area/${area}`,
        type: "GET",
        dataType: 'json',
        async: false,
        success: function(data) {
            if (data.status == 200) {
                create(data.data, area);
            } else {
                layer.msg(data.data, { time: 2000, icon: 2 });
            }
        },
        error: function(XMLHttp, textStatus, errorThrown) {
            layer.msg(`请求 ${XMLHttp} 状态 ${textStatus} 异常 ${errorThrown}`, { time: 2000, icon: 2 });
        }
    });
}

// 模态框调用show方法之后立即触发该事件
$("#myModal_left").on("show.bs.modal", function() {
    // getMediaAsset(value, rectpl_id, area);
});

// 获取"动作"下拉框内容
function setAdata(range) {
    $.ajax({
        url: `/api/cms/range`,
        dataType: 'json',
        async: false,
        success: function(data) {
            console.log(data);
            if (data.status == 200) {
                $("#action").empty();
                var item = '';
                for (var i = 0; i < data.data.length; i++) {
                    if(data.data[i].id == range) {
                        item += `<option selected = "selected" value="${ data.data[i].id}"> ${ data.data[i].title }</option>`
                    } else {
                        item += `<option value="${ data.data[i].id}"> ${ data.data[i].title }</option>`
                    }
                }
                $("#action").append(item);
                var value = $("#action").val();
                template(value);
            } else {
                layer.msg(data.data, { time: 2000, icon: 2 });
            }
        },
        error: function(XMLHttp, textStatus, errorThrown) {
            layer.msg(`请求 ${XMLHttp} 状态 ${textStatus} 异常 ${errorThrown}`, { time: 2000, icon: 2 });
        }
    });
}
// 监听动作选择的内容,动态刷新跳转模板
$("#action").change(function() {
    var value = $("#action").val();
    if(value == 1){
        $("#refresh").show();
    } else {
        $("#refresh").hide();
    }
    template(value);
});
// 根据"动作"的选择,动态刷新跳转模板内容
function template(range) {
    $.ajax({
        url: `/api/cms/range/${range}/tpls`,
        dataType: 'json',
        async: false,
        success: function(data) {
            console.log(data);
            if (data.status == 200) {
                $("#template").empty();
                var item = '';
                for (var i = 0; i < data.data.length; i++) {
                    item += `<option value="${ data.data[i].id}"> ${ data.data[i].title }</option>`
                }
                $("#template").append(item);
            } else {
                layer.msg(data.data, { time: 2000, icon: 2 });
            }
        },
        error: function(XMLHttp, textStatus, errorThrown) {
            layer.msg(`请求 ${XMLHttp} 状态 ${textStatus} 异常 ${errorThrown}`, { time: 2000, icon: 2 });
        }
    });
}
// 上传图片
// $("#impic_upload").change(function() {
//     var _params = {

//     }
//     $("#chat_form").ajaxSubmit({
//         type: 'POST', //请求类型
//         url: '/api/cms/images', //该php中可接收$_FILES数组
//         data: _params,
//         beforeSubmit: function() {},
//         success: function(data) {
//             //操作成功后
//             if (data.status == "success") {
//                 // 图片上传成功后更新数据
//                 reviseImageUrl(data.content);
//                 console.log(data);
//             } else {
//                 layer.msg(data.data, { time: 2000, icon: 2 });
//             }
//         },
//         error: function(error) {
//             // layer.msg("图片上传失败");
//             layer.msg("图片上传失败", { time: 2000, icon: 2 });
//         },
//         resetForm: true, //操作完成后是否重置表单
//         dataType: 'json' //返回数据格式
//     });
// });

// 保存修改数据
function addAmendData() {
    //获取栏目区域推荐数据,切换区域时将该变量设置为空数组
    if (column_area_recommend.length == 0) {
        column_area_recommend = tranformColumnAreaRecommend($('#column_recommend').dataTable().fnGetData());//得到栏目区域所有对象并且转化为提交的数据格式
    }
    var _data = column_recommend.row($(".selected")).data();
    if(_data) {
        let key = column_area_recommend.findIndex(column_area_recommend => column_area_recommend.data_id == _data.data_id);
        var value = $(".selectpicker");
        for (var i = 0; i < value.length; i++) {
            switch($(value[i]).attr("name")) {
                case "title":
                    column_area_recommend[key]['title'] = $(value[i]).val(); 
                    break;
                case "template":
                    column_area_recommend[key]['subtitle'] = $(value[i]).val();
                    break;
                case "tags":
                    // column_area_recommend[index][''] = ;
                    break;
                default:
                    break;
            }
        }
        addRecommendData();
    } else {
        layer.msg('请选择数据', { time: 2000, icon: 2 });
    }
}

// 删除单条数据
function removeData(that) {

    /*停止冒泡*/
    var e = window.event || event;
    e.stopPropagation();


    /*获取ID*/
    var id = $(that).attr('data-id');

    // var row = column_recommend.row($(that).parents('tr'));
    // var _data = row.data();
    // var id = _data.data_id;
    // layer.alert('确定删除吗?', {icon: 0 })
    layer.confirm('确定删除吗？', {
      btn: ['确定', '取消', ], //可以无限个按钮
      icon: 0 
    }, function(index, layero){
        //按钮【按钮一】的回调
        //获取栏目区域推荐数据,切换区域时将该变量设置为空数组
        if (column_area_recommend.length == 0) {
            column_area_recommend = tranformColumnAreaRecommend($('#column_recommend').dataTable().fnGetData());//得到栏目区域所有对象并且转化为提交的数据格式
        }
        let key = column_area_recommend.findIndex(column_area_recommend => column_area_recommend.data_id == id);
        if (key != -1) {
            column_area_recommend.splice(key, 1);
        }
        addRecommendData();
    }, function(index){
      //按钮【按钮二】的回调
      
    });
    //获取栏目区域推荐数据,切换区域时将该变量设置为空数组
    // if (column_area_recommend.length == 0) {
    //     column_area_recommend = tranformColumnAreaRecommend($('#column_recommend').dataTable().fnGetData());//得到栏目区域所有对象并且转化为提交的数据格式
    // }
    // let key = column_area_recommend.findIndex(column_area_recommend => column_area_recommend.data_id == _data.data_id);
    // if (key != -1) {
    //     column_area_recommend.splice(key, 1);
    // }
    // addRecommendData();
}

// 图片上传插件
layui.use('upload', function(){
  var $ = layui.jquery;
  var upload = layui.upload;
    //拖拽上传
    upload.render({
        elem: '#impic_upload1',
        url: `/api/cms/images`,
        accept: 'images',        // 允许上传的文件类型
        field: 'img',            // 设定文件域的字段名
        data: '',
        done: function(res) {    // 上传后回调
          console.log(res);
        }
    });
    upload.render({
        elem: '#impic_upload2',
        url: `/api/cms/images`,
        accept: 'images',        // 允许上传的文件类型
        field: 'img',            // 设定文件域的字段名
        data: '',
        done: function(res) {    // 上传后回调
          console.log(res);
        }
    });
})

// 销毁表格
function destruction() {
    if ($('#column_recommend').hasClass('dataTable')) {
        // 移除点击事件
        $("#column_recommend").off("click", "tr");
        var oldTable = $('#column_recommend').dataTable();
        oldTable.fnClearTable(); //清空一下table
        oldTable.fnDestroy(); //还原初始化了的dataTable
        $('#column_recommend').empty();
    }
}

// 根据数据类型选中内容刷新表单数据
$("#data_type").change(function() {
    var value = $('#data_type').val();
    recommend_data_type = value;
    if (value != 0) {
        getMediaAsset(value, rectpl_id, area);
    }
})

// 添加点击事件
function addClickActive(cl) {
    // var index = 0;
    // if(apprec_name == "XLSZTJMBSY") {
    //     index = 0;
    // } else if(apprec_name == "XLSZSYTJWXT") {
    //     index = 1;
    // } else if(apprec_name == "XLSZSYTJWZJWZ") {
    //     index = 2;
    // } else if(apprec_name == "XLSZSYTJWTSYLS") {
    //     index = 7;
    // }
    for(var ele in cl) {
        if(ele == 'x0y0') {
            $("#n0_content_left_top_box__0").click(function() {
                $(".pitchOn").removeClass("pitchOn");
                $(this).addClass('pitchOn');
                // 区域id
                area = 'x0y0';
                $('#area_name').html(area);
                getDataType(getMediaAsset, renderDataType, getColumnAreaRecommend);
            });
        } else {
            $('#' + ele).click(function() {
                $(".pitchOn").removeClass("pitchOn");
                $(this).addClass('pitchOn');
                // 区域id
                area = $(".pitchOn").attr("id");
                $('#area_name').html(area);
                getDataType(getMediaAsset, renderDataType, getColumnAreaRecommend);
            });
        }
    }
}